<style scoped lang="less">
	.container {
		text-align: left;
	}
	
	.btn-wrap {
		padding: 2vh 0;
		text-align: center;
	}
	
	.van-button {
		padding: 0 10vw;
	}
	
	.goods-wrap {
		display: flex;
	}
	
	img.goods-img {
		width: 14vw;
		height: 14vw;
		margin-right: 1vw;
	}
</style>
<template>
	<div class="container">
		<van-cell-group title="建议内容">
			<van-field
				v-model="content"
				rows="4"
				autosize
				type="textarea"
				maxlength="400"
				placeholder="请输入内容"
				show-word-limit
			/>
		</van-cell-group>
		<van-cell-group title="图片">
			<van-cell value="图片">
				<upload :max-count="9" v-model="imgList"></upload>
			</van-cell>
		</van-cell-group>
		<div class="btn-wrap">
			<van-button @click="toSubmit" type="primary" :loading="loading">提交</van-button>
		</div>
	</div>
</template>
<script>
  import {save} from '@/api/suggest'
  import {isNull} from '@/libs/util'
  import upload from '@/components/common/Upload.vue'
  import Vue from 'vue';
  import {Field, CellGroup, Cell, Button, Dialog, Toast} from 'vant';

  Vue.use(Field).use(CellGroup).use(Cell).use(Button).use(Toast);
  export default {
    name: 'comment',
    components: {
      upload
    },
    data() {
      return {
        loading: false,
        content: '',
        imgList: [],
      }
    },
    created() {
    },
    methods: {
      toSubmit() {

        if (isNull(this.content)) {
          Toast('请输入评价内容');
          return;
        }
        Dialog.confirm({
          title: '提示',
          message: '确认提交吗？'
        }).then(() => {
          this.submit();
        }).catch(() => {
          // on cancel
        });
      },
      submit() {
        this.loading = true;
        let imgs = [];
        this.imgList.forEach(v => {
          imgs.push(v.name);
        });
        save({imgs: JSON.stringify(imgs), content: this.content, goods_id: this.goods_id}).then(rep => {
          Toast({
            type: 'success',
            message: '提交成功',
            onClose: () => {
              window.history.go(-1);
            }
          });

          this.loading = false;
        }, error => {
          this.loading = false;
        })
      }
    }
  }
</script>